<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../wh2114/vuedemo/lib/vue.js"></script>
    <script src="../wh2114/vuedemo/lib/vue-router.js"></script>
    <link rel="stylesheet" href="../wh2114/vuedemo/lib/animate.css" />
    <script src="http://47.104.209.44/base/js/jquery-1.10.1.min.js"></script>
    <style>
      .box {
        width: 170px;

        background: darkcyan;
        padding: 30px;
      }
      table {
        border: 1px solid #000;
      }
      td {
        border: 1px solid #000;
        padding: 10px;
        text-align: center;
      }
      ul {
        list-style: none;
        display: flex;
        margin: 0;
        padding: 0;
      }
      li {
        width: 200px;
        background: pink;
      }

      .zoom-enter-active {
        animation: zoomInDown 0.9s;
      }

      .zoom-leave-active {
        animation: zoomOutDown 0.9s;
      }

      .box {
        width: 50%;
        min-height: 300px;
        border: 1px solid #999;
        border-radius: 10px;
      }
      .router-link-exact-active,
      .router-link-active {
        font-size: 30px;
        font-weight: bold;
        color: #f50;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h2>{{title}}</h2>
      <myhead></myhead>

      <!-- 5, 路由出口 路由匹配到的组件将渲染在这里  -->
      <router-view class="box"></router-view>

      <hr />
      <!-- 6 路由跳转 声明式 -->
      <div>
        <router-link :to="{name:'home',params:{token:'wh2114-dayadyup'}}"
          >首页</router-link
        >
        <router-link :to="{name:'list'}">列表</router-link>
        <router-link :to="{name:'mine',query:{mid:2114,name:'zuozuomu'}}"
          >我的</router-link
        >
        <router-link :to="{name:'notFound'}">404</router-link>
      </div>
    </div>

    <template id="home">
      <div>
        <h2>Home - Home - Home</h2>
        <h2>token --- {{$route.params.token }}</h2>
        <button @click="gotomine">点击进入我的</button>
        <button @click="goback">返回上一级</button>
      </div>
    </template>

    <template id="list">
      <div>
        <h3>list - list - list</h3>
        <div>
          <p v-for="(l,i) in list" :key="i">
            <router-link :to="{name:'detail',query:l}">
              {{l.name}} - {{i}}
            </router-link>
          </p>
        </div>
      </div>
    </template>

    <template id="mine">
      <div>
        <h2>Mine - Mine - 个人中心</h2>
        <h2>mid -- {{$route.query.mid }}</h2>
        <h2>name -- {{$route.query.name }}</h2>
      </div>
    </template>
    <template id="notfound">
      <div>
        <h2>notfound - notfound - 404</h2>
      </div>
    </template>
    <template id="detail">
      <div>
        <h2>
          歌单详情- detail - <button @click="$router.back()">返回</button>
        </h2>
        <h2>name -- {{$route.query.name }}</h2>
        <h2>歌曲数量 -- {{$route.query.resourceCount }}</h2>
      </div>
    </template>
    <script>
      Vue.component("myhead", {
        template: "<h2>Head - wh2114-daydayup</h2>",
      });
      // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)  (脚手架)

      // 1. 定义路由组件.
      const Home = {
        template: "#home",
        methods: {
          gotomine() {
            // this.$router
            // router
            // this.$router.push('/mine?mid=2113&name=leson')
            // router.push({name:'mine'})
            router.push({ name: "mine", query: { mid: 2110, name: "老王" } });
          },
          goback() {
            // router.go(-1)
            this.$router.back();
          },
        },
      };
      const Detail = {
        template: "#detail",
      };
      const List = {
        template: "#list",
        data() {
          return {
            list: [],
          };
        },
        mounted() {
          $.ajax({
            url: "http://47.104.209.44:3333/playlist/catlist",
            type: "GET",
            data: {},
            success: (res) => {
              console.log(res);
              this.list = res.sub;
            },
          });
        },
      };
      const Mine = {
        template: "#mine",
      };
      const NotFound = {
        template: "#notfound",
      };
      // 2. 定义一些路由
      // 每个路由都需要映射到一个组件。
      const routes = [
        {
          path: "/",
          redirect: "/home",
        },
        {
          path: "/home/:token",
          name: "home",
          component: Home,
        },
        {
          path: "/list",
          alist: "/goods",
          name: "list",
          component: List,
        },
        {
          path: "/detail",
          name: "detail",
          component: Detail,
        },
        {
          path: "/mine",
          name: "mine",
          component: Mine,
        },
        {
          path: "/404",
          name: "notFound",
          component: NotFound,
        },
        {
          path: "*",
          redirect: "/404",
        },
      ];

      // 3. 创建路由实例并传递 `routes` 配置  你可以在这里输入更多的配置
      // # 表示 hash 路由
      const router = new VueRouter({
        routes,
        mode: "history",
        base: "",
        scrollBehavior(to, from, savedPosition) {
          // return 期望滚动到哪个的位置
          // return 0
          return savedPosition;
        },
      });
      // scrollBehavior 滚动行为
      // base 应用的基路径  一般不用设置   采用是相对路径   上线的时候才需要单独去设置路径
      // mode 路由模式
      // hash  url地址的 hash 模式  兼容性强     带#号 可以刷新浏览器  但是地址比较长 不简洁
      // history  不带 # 号  不能刷新浏览器 (需要服务器重定向404 )   比较简洁优雅   依赖 HTML5 History API 和服务器配置

      // 4. 路由挂载到根实例
      const vm = new Vue({
        router, // this.$router
        data: {
          title: "Vue 路由初步 - 跳转",
        },
        components: {},
        watch: {
          $route: function (to, from) {
            console.log(to);
            console.log(from);
          },
        },
        mounted() {
          document.getElementsByTagName("title")[0].innerHTML = this.title;

          console.log(this.$router); // 路由对象  负责路由跳转 路由导航和路由全局监听
          console.log(this.$route); // 路由信息对象  当前激活的路由对象  路由参数 query(?)&params(:)
        },
      }).$mount("#app");
    </script>
    <!-- 
        嵌套路由
       有多少层嵌套就写多少个 children  每一层嵌套都必须对应有一个 router-view 
 
        路由跳转

        1. 声明式  html跳转  router-link   to   
        2. 编程式  javascript 跳转   函数代码跳转  this.$router  router 
        // 字符串
        router.push('home')
        // 对象
        router.push({ path: 'home' })
        // 命名的路由
        router.push({ name: 'user', params: { userId: '123' }})
        // 带查询参数，变成 /register?plan=private
        router.push({ path: 'register', query: { plan: 'private' }})

        router == this.$router  路由实例对象 进行路由跳转 还可以监听路由切换 
        $route == this.$route   路由对象属性  (params query name)

        router.go(1)
        router.goforward();    前进
        router.go(-1);       后退 
        router.back()  
     -->
  </body>
</html>
